.about {
  flex: 1px;
  background-color: #cccccc;
  padding: 0 15px;
  .about-max-box {
    position: relative;
    max-width: 1290px;
    margin: 20px auto;
    padding: 15px;
    border-radius: 16px;
    background-color: #fff;
    h2 {
      margin-top: 40px;
      margin-bottom: 15px;
      color: salmon;
      text-align: center;
      font-size: 24px;
    }
    //  作者信息
    .uInfo {
      display: flex;
      // max-width: 367px;
      height: 50px;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ccc;
      // 头像
      .uIcon {
        width: 35px;
        height: 35px;
        margin-right: 10px;
        border-radius: 35px;
        overflow: hidden;
        // background-color: pink;
        img {
          width: 100%;
          height: 100%;
        }
      }
      // 名字和 评论 点赞等数量
      .uTxt {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        // 名字
        .uName {
          a {
            color: salmon;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            &:hover {
              border-bottom: 1px solid salmon;
            }
          }
        }
        // 评论 点赞等数量
        span {
          max-width: 200px;
          font-size: 12px;
          color: #909399;
          /* 多行溢出文字省略号显示必须满足五个条件： */
          /* 1 超出的部分文本进行隐藏 */
          overflow: hidden;
          /* 2 文字用省略号代替超出的部分 */
          text-overflow: ellipsis;
          /*  3 设置弹性伸缩盒子模型显示 */
          display: -webkit-box;
          /*  4 限定在一个块元素显示的文本的行数（取决于哪行超出用省略号显示） 4就表示第三行超出省略*/
          -webkit-line-clamp: 1;
          /* 5 设置或检查伸缩盒子对象的子元素的排序方式 */
          -webkit-box-orient: vertical;
        }
      }
    }
    // 右侧日期
    .reightDate {
      position: absolute;
      right: 15px;
      top: 110px;
      width: 90px;
      height: 42px;
      font-size: 32px;
      color: #606266;
      line-height: 42px;
      text-align: center;
    }
  }
}
